<template>
	<div class="content">
		<div class="img-box" v-if="userInfo.headerPic">
			<img id="imgRoat" :src="userInfo.headerPic" alt="">
			<p>身份证照片</p>
		</div>
		<!-- <div class="bg-box"></div> -->
		<!-- <div class="msg" v-if='userInfo.result == "success"'>
			<van-icon name="success" />
			<span>人证对比成功</span>
		</div>
		<div class="msg " v-else>
			<van-icon name="fail" />
			<span>人证对比失败</span>
		</div> -->
		<div class="msg ">
			<span>核验结果</span>
		</div>
		<div class="text">
			<!-- <div class="title">
				妇幼保健院
			</div> -->
			<div class="cell">
				<span>姓名</span>
				<span>{{ userInfo.encryptName }}</span>
			</div>
			<div class="cell">
				<span>实人认证</span>
				<span :class="[comparison ? '' : 'fail']">{{ comparison ? '人证对比成功' : '人证对比失败' }}</span>
			</div>
			<div class="cell" v-if="userInfo.businessTypeName=='住院分娩'&&this.form.dsfMsg">
				<span>产妇核验</span>
				<span>{{ this.form.dsfMsg }}</span>
			</div>
			<div class="cell">
				<span>身份证号</span>
				<span>{{ userInfo.encryptIdCard }}</span>
			</div>
			<div class="cell">
				<span>核验场景</span>
				<span>{{ userInfo.businessTypeName }}</span>
			</div>
			<div class="cell">
				<span>核验时间</span>
				<span>{{ userInfo.dateTime }}</span>
			</div>
		</div>
		<!-- <div class="btn-group">
			<button @click='cancel'>返回({{shijian}})</button>
		</div> -->
	</div>
</template>

<script>
import {
	mapState,
	mapMutations,
	mapActions
} from 'vuex'
import { imageRotate } from '@/common/rotate'
import {
	verificationAdd,
} from "@/api/index";
import {
	encryptByDES, hideStrForName, hideStrForIdCard
} from "@/utils/index";
import dayjs from 'dayjs';
export default {
	data() {
		return {
			list: [],
			searchForm: {
				pageSize: 4, //每页数据个数
				currentPage: 1, //当前页码
			},
			total: 0,
			loading: false,
			form: {

			}
		}
	},
	computed: {
		...mapState(['userInfo', 'config', 'deviceInfo', 'desKey']),
		comparison() {
			return this.userInfo.result == "success"
		}
	},
	mounted() {
		console.log('userinfo:', this.userInfo);

    this.setRecordList({
      encryptName:this.userInfo.encryptName,
      encryptIdCard:this.userInfo.encryptIdCard,
      dateTime:this.userInfo.dateTime,
      businessTypeName:this.userInfo.businessTypeName,
      result:this.userInfo.result == 'success' ? "认证成功" : "认证失败",

      "sn": this.deviceInfo.sn,
      "primarySceneCode": this.userInfo.businessType,
      "primarySceneName": this.userInfo.businessTypeName,
      "secondarySceneCode": "",
      "secondarySceneName": "",
      "userName": this.userInfo.name,
      "userIdCard": this.userInfo.idCard,
      "verificationResult": this.userInfo.result == 'success' ? "认证成功" : "认证失败",
      "operator": "xuhui",
      "verifier": "xuhui",
      certificationTime: this.userInfo.dateTime,
      faceIdCard: this.userInfo.faceIdCard,
      faceName: this.userInfo.faceName,
      facePhone: this.userInfo.facePhone,
    })
		if (this.userInfo.result != 'success') {
			// this.imageToBase64()
      if(this.userInfo.headerPic){
        this.imageToBase64()
      }
     /* if(this.userInfo.headerPic){
        this.imageToBase64()
      }else {
        this.setUserInfo({ verificationPhoto: "" })
        this.verificationAdd();
      }*/
			XhAggregation.speak({
				text: "实人核验失败"
			})
		}else{
			this.verificationAdd();
		}

	},
	methods: {
		...mapMutations(['setUserInfo','setRecordList','clearUserInfo']),
		hideStrForName, hideStrForIdCard,imageRotate,
		async verificationAdd() {
			let data = {
				"sn": this.deviceInfo.sn,
				"primarySceneCode": this.userInfo.businessType,
				"primarySceneName": this.userInfo.businessTypeName,
				"secondarySceneCode": "",
				"secondarySceneName": "",
				"userName": this.userInfo.name,
				"userIdCard": this.userInfo.idCard,
				"verificationResult": this.userInfo.result == 'success' ? "认证成功" : "认证失败",
				"operator": "xuhui",
				"verifier": "xuhui",
				certificationTime: this.userInfo.dateTime,
				faceIdCard: this.userInfo.faceIdCard,
				faceName: this.userInfo.faceName,
				facePhone: this.userInfo.facePhone,
			}
			console.log('data',data)
			console.log("this.userInfo.headerPic",this.userInfo.headerPic)
			let encryptData = encryptByDES(JSON.stringify(data), this.desKey)
			const res = await verificationAdd({
				data: encryptData,
				electronicSignature: this.userInfo.electronicSignature,
				// verificationPhoto: this.userInfo.verificationPhoto,
				idCardPhoto: this.userInfo.verificationPhoto,
				// apiModel: {
				// 	idCardPhoto: this.userInfo.headerPic
				// }
			})
			if (res.success) {
				this.form = res.data
				// this.form.dsfMsg="第三方系统调用异常"
				if (this.form.dsfMsg) {
					XhAggregation.speak({
						text: this.form.dsfMsg
					})
				}
        // this.clearUserInfo()
			}
		},
		cancel() {
			this.$router.push({
				path: '/index'
			})
		},

		imageToBase64() {
			let img = document.querySelector('#imgRoat')
			img.crossOrigin = 'anonymous';
			img.onload = async () => {
				console.log('@@@@@@@@:', 3333333333);
				const base64 = imageRotate(img)
				this.setUserInfo({ verificationPhoto: base64 })
				console.log('base64:', base64);
				this.verificationAdd();
			}
		},
	}
};
</script>
<style lang="less" scoped>
.content {
	padding: 0 15px;
	.img-box {
		// visibility: hidden;
		display: none;
	}
	.msg {
		color: #fff;
		font-size: 30px;
		position: relative;
		margin: 10px 0px 20px;
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		align-items: center;

		span {
			margin-left: 10px;
		}

		&.error {
			color: red;
		}
	}

	.bg-box {
		background: #327fff;
		width: 100vw;
		height: 45vh;
		position: absolute;
		top: 0px;
		left: 0px;
		border-bottom-right-radius: 50px;
		border-bottom-left-radius: 50px;
		z-index: 0;
	}

	.img-box {
		text-align: center;
		position: relative;
		z-index: 1;
		margin-bottom: 20px;
		margin-top: 20px;

		img {
			width: 80px;
			height: 100px;
			background: #000;
		}

		p {
			color: #fff;
		}
	}

	.text {
		position: relative;
		z-index: 1;
		background: #fff;
		width: 90%;
		margin: 0 auto;
		border-radius: 15px;
		padding: 40px 20px;
		// margin-bottom: 20px;

		.title {
			font-size: 22px;
			padding-bottom: 10px;
			margin-bottom: 10px;
			// border-bottom: 1px solid #000;
			color: #000;
		}

		.cell {
			margin: 20px 0px;
			display: flex;
			flex-wrap: wrap;
			align-content: center;
			align-items: center;
			justify-content: space-between;

			span {
				font-size: 16px;

				&.fail {
					color: #f00;
				}
			}

		}

	}

	.btn-group {
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		bottom: 10px;
		left: 50%;
		transform: translate(-50%, 0%);
		width: 50%;
	}

	button {
		width: 100%;
	}
}
</style>